<template>
  <div>
    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}" style="margin-top: 20px">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <a-tab-pane loading="true" tab="总课时" key="1">
            <a-row>
              <a-col :xl="18" :lg="18" :md="18" :sm="24" :xs="24">
                <school-total-classtime :date="date" :names="orgNames" :values="totals"></school-total-classtime>
              </a-col>
              <a-col :xl="6" :lg="6" :md="6" :sm="24" :xs="24">
                <school-classtime-proportion :date="date" ></school-classtime-proportion>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane tab="平均课时" key="2">
            <a-row>
              <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
                <school-average-classtime :date="date" :names="orgNames" :values="averages"></school-average-classtime>
              </a-col>
              <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
                <school-teacher-counts :date="date" :names="orgNames" :values="teacherCounts"></school-teacher-counts>
              </a-col>
            </a-row>
          </a-tab-pane>

        </a-tabs>
      </div>
    </a-card>
  </div>
</template>

<script>
import GYearPicker from '@views/gfxy/common/GYearPicker'
import SchoolTotalClasstime from '@views/dashboard/gfxy/school/classtime/SchoolTotalClasstime'
import SchoolAverageClasstime from '@views/dashboard/gfxy/school/classtime/SchoolAverageClasstime'
import SchoolTeacherCounts from '@views/dashboard/gfxy/school/classtime/SchoolTeacherCounts'
import { getAction } from '@api/manage'
import SchoolClasstimeProportion from '@views/dashboard/gfxy/school/classtime/SchoolClasstimeProportion'
export default {
  name: "SchoolClasstimeBashboard",
  components: { SchoolClasstimeProportion, SchoolTeacherCounts, SchoolTotalClasstime,SchoolAverageClasstime,GYearPicker },

  props:{
    date: {
      type: String,
      default: () => []
    },
  },

  data(){
    return {
      loading: true,

      averages:[],
      teacherCounts:[],
      orgNames:[],
      totals:[],
      url:{
        classTimeList:"index/schoolIndex/listClasstimeByYear",
        classTimeProportion: "index/schoolIndex/classTimeProportionByYear"
      },
    }
  },
  watch:{
    date :function() {
      this.loadClasstime();
    }
  },

  mounted() {
    this.loadClasstime();
  },
  methods:{
    loadClasstime(){
      getAction(this.url.classTimeList, { date: this.date}).then((res) => {
        if (res.success) {
          console.log(res.result);

          this.averages = res.result.averages;
          this.teacherCounts = res.result.teacherCounts
          this.orgNames = res.result.orgNames
          this.totals  = res.result.totals
        }
        // console.log(this.options)
        if(res.code===510){
          this.$message.warning(res.message)
        }
        this.loading = false;
      })
    }
  }
}
</script>

<style scoped>

</style>